<template>
  <el-container>
    <el-aside :width="isCollapse ? 'auto' : '218px'" class="aside" :class="skin">
      <!--导航菜单-->
      <!-- @open="handleopen"
        @close="handleclose"
      @select="handleselect"-->
      <div class="logo" :class="skin" v-if="!isCollapse" >
        超级棒棒
      </div>
      <div class="logo-mini" :class="skin" v-if="isCollapse" >
        超
      </div>
      <!--background-color="#191A23" -->
      <el-menu
        :default-active="$route.path"
        unique-opened
        router
        :collapse="isCollapse"
        text-color="#fff"
        class="el-menu-vertical-demo"
        background-color="#191A23"
        :class="skin"
      >
        <template v-for="(item,index) in $router.options.routes">
          <el-submenu :index="index+''" v-if="!item.hidden && !item.leaf" :key="index">
            <template slot="title">
              <i :class="item.iconCls"></i>
              <span slot="title">{{item.name}}</span>
            </template>
            <template v-for="child in item.children">
              <el-menu-item
                :index="child.path"
                :key="child.path"
                v-if="!child.hidden"
              >{{child.name}}</el-menu-item>
            </template>
          </el-submenu>
          <template v-if="item.leaf&&item.children.length>0">
            <el-menu-item :index="item.children[0].path" :key="index">
              <i :class="item.iconCls"></i>
              <span slot="title">{{item.children[0].name}}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="app-header" >
        <el-row :gutter="20">
          <el-col :span="20">
            <div class="shrink" style="width: 60px; cursor: pointer;" @click="isCollapse=!isCollapse">
              <i v-show="!isCollapse" class="el-icon-d-arrow-left"></i>
              <i v-show="isCollapse" class="el-icon-d-arrow-right"></i>
            </div>
          </el-col>

          <el-col :span="4">
            <div class="userinfo">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <!-- {{$store && $store.state.name || "超级管理员"}}<i class="el-icon-arrow-down el-icon--right"></i> -->
                  超级管理员<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
              
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <i class="el-icon-user"></i>
                    我的消息
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <i class="el-icon-edit"></i>
                    设置
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <i class="el-icon-switch-button"></i>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
         </el-row>
      </el-header>
      <el-main>
        <div>
          <el-tabs class="tabs-cont" v-model="nameVal" type="card" closable @tab-remove="removeTab" @tab-click="clickFn">
            <el-tab-pane
              v-for="(item) in tabGroup"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 面包屑 -->
        <div class="breadcrum" v-if="isBreadcrum">
          <el-breadcrumb separator="/" class="breadcrumb-inner">
            <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <transition name="fade" mode="out-in">
          <el-scrollbar :class="isBreadcrum?'scrollbar100':'scrollbar50'">
            <!--这是缓存页面 -->
            <!-- <keep-alive> -->
              <router-view></router-view>
            <!-- </keep-alive> -->
          </el-scrollbar>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { screenFn, DEVICE_TYPE } from '@/utils/screen'
export default {
  data() {
    return {
      isCollapse: false,
      isBreadcrum:false, //是否显示面包屑
      nameVal: "", //显示的tap名字
      tabGroup: {}, //tap栏的集合
      skin:"skin-black",
    };
  },
  methods: {
    // toggleSideBar() {
    //   this.isCollapse = !this.isCollapse;
    // },
    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    //头部导航菜单
    clickFn(targetName){
      let $this = this;
      $this.$router.push({path:targetName.name}); //点击tap标签跳转的hash值      
    },
    removeTab(targetName) {
      let $this = this;
      // 判断这是最后一项
      if(Object.keys($this.tabGroup).length==1){
        $this.$notify({
          title: '警告',
          message: '最后一项不可关闭',
          type: 'warning',
          duration:1000
        });
        return
      }
      // 判断关闭想是否当前选中项
      if(targetName==this.nameVal){
        let tabGroupObj = Object.keys($this.tabGroup); //把tabGroupObj 的 key值变成数组
        let index = tabGroupObj.findIndex(item=> item=== targetName);  //找到当前的点击obj的index值
        if(tabGroupObj.length == index+1){
          $this.nameVal = tabGroupObj[index-1];      //当前taps前一个
          $this.$router.push({path:$this.nameVal});  //点击tap标签跳转的hash值         
          this.$delete(this.tabGroup,targetName)     //删除当前taps
        }else{
          $this.nameVal = tabGroupObj[index+1];      //当前taps后一个
          $this.$router.push({path:$this.nameVal});  //点击tap标签跳转的hash值        
          this.$delete(this.tabGroup,targetName)     //删除当前taps
        }
      }else{
        this.$delete(this.tabGroup,targetName)
      }
    }
  },
  mounted: function() {
    let $this = this
    // 获取默认当前hash值添加taps 
    this.$set(this.tabGroup,this.$route.path,{
      title:this.$route.name,
      name:this.$route.path
    })
    this.nameVal = this.$route.path;

    // 媒体查询
    // screenFn(deviceType => {
    //   switch (deviceType) {
    //     case DEVICE_TYPE.DESKTOP:
    //       console.log(DEVICE_TYPE.DESKTOP)
    //       break
    //     case DEVICE_TYPE.TABLET:
    //       console.log(DEVICE_TYPE.TABLET)
    //       break
    //     case DEVICE_TYPE.MOBILE:
    //     default:
    //       console.log(DEVICE_TYPE.MOBILE)
    //       break
    //   }
    // })
    // console.log(this.$router.options.routes);
    // console.log(this.$route.matched)
  },
  watch:{
    // 路由变化时候添加或删除taps
    $route(to,from){
      this.$set(this.tabGroup,to.path,{
        title:to.name,
        name:to.path
      })
      this.nameVal = this.$route.path;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.skin-black{
  background-color: $skin-black !important;
  .el-menu-item{
    background-color: $skin-black !important;
  }
  >>>.el-submenu__title:hover{
    background: #23282f !important;
  }
  .shrink{
    color: #fff !important;
  }
  .el-dropdown-link{
    color: #fff !important;
  }  
  .el-menu{
    background: #23282f !important;
  }
}

.skin-orange{
  background-color: $skin-orange !important;
  .el-menu-item{
    background-color: $skin-orange !important;
  }
  >>>.el-submenu__title:hover{
    background: #FB5D27 !important;
  }
  .shrink{
    color: #fff !important;
  }
  .el-dropdown-link{
    color: #fff !important;
  }
}

.el-aside {  
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow-x: hidden;
}

// .el-main {
//   background-color: #e9eef3;
//   color: #333;
//   text-align: center;
//   // line-height: 160px;
// }
.container {
  height: 100%;
}
.el-container {
  height: 100%;
}
.aside{
  padding-top: 60px;
}
.logo {
  height: 60px;
  line-height: 60px;
  position: absolute;
  width: 218px;
  z-index: 99;
  top: 0;
  background: #191a23;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border-bottom:1px solid #464545 ;
}
.logo-mini{
  height: 60px;
  line-height: 60px;
  position: absolute;
  z-index: 99;
  top: 0;
  background: #191a23;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  width: 64px;
  border-bottom:1px solid #464545 ;
}
.app-header{
  line-height: 59px;
  border-bottom: 1px solid #464545;
}
.userinfo{
  text-align: center;
  .el-dropdown-link{
    color:#72BFF3;
    cursor: pointer;
  }
}
.el-dropdown-menu__item {
  font-size: 14px;
}
.breadcrum{
  padding:20px;
  border-bottom:1px solid #d7d7d7;
}
.scrollbar100{
  height: calc(100% - 100px);
}
.scrollbar50{
  height: calc(100% - 50px);
}
</style>
